<template>
  <div class="comment-box">
    <p class="comment-title">
      <span>评论</span>
      <span v-if="count">({{count}})</span>
    </p>
    <div class="info">
      <img :src="mySelfData.user_img" alt="" v-if="mySelfData" />
      <input type="text" v-model="commentText" ref="commInput" placeholder="说点什么吧"  />
      <input type="button" value="发表" @click="isLogin" />
    </div>
    <div class="comment-text" >
      <div class="user-comment" v-for="(item,index) in commentList" :key="index">
        <div class="user-comment-top" v-if="item.userinfo">
          <img v-if="item.userinfo.user_img" :src="item.userinfo.user_img" /> 
          <img v-else :src="`@/assets/default_img.jpg`" /> 
          <span>{{item.userinfo.name}}</span>  {{ item.comment_date }}
        </div>
        <div class="user-comment-bottom"> 
          <!-- 一级评论 -->
          {{item.comment_content}}  <span  class="com_user" @click="clickCom(item.comment_id)"> 回复</span>
        </div>
        <!-- 二级评论 -->
          <comment-item class="comment-items" :childrenList="item.childrenList" @comClick="clickCom"></comment-item>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import { getMyUserInfo, getComment, Postcomments } from "../../utils/Api";
import commentItem from "./commentItem.vue";
// import http from "./../../utils/Request";

export default {
  components: { commentItem },
  data() {
    return {
      count: null,
      mySelfData: null,
      commentText: null,
      commentList: {},
      Postcom: {
        comment_content: "",
        comment_date: null,
        parent_id: null,
        article_id: null,
      },
    };
  },
  computed: {
    isFollow() {
      return this.$store.state.isFocus; //需要监听的数据
    },
  },
  watch: {
    isFollow(newVal, oldVal) {
      console.log("更新了");
      if (newVal == true) {
        this.$refs.commInput.focus();
        this.$store.dispatch("setFocusFalse1");
      }
    },
  },
  created() {
    this.myUserInfo();
    this.getComment();
  },
  methods: {
    async myUserInfo() {
      const res = await getMyUserInfo(JSON.parse(localStorage.getItem("id")));
      this.mySelfData = res.data[0];
    },
    isLogin() {
      if (JSON.parse(localStorage.getItem("token")) && this.myUserInfo) {
        this.Postcomment();
      } else {
        this.$toast.fail("请先登录");
      }
    },

    async Postcomment() {
      const date = new Date();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      m = m.toString();
      if (m.length < 2) {
        m = "0" + m;
      }
      if (d < 10) {
        d = "0" + d;
      }

      this.Postcom.comment_content = this.commentText;
      this.Postcom.comment_date = `${m}-${d}`;
      this.Postcom.article_id = this.$route.params.id;

      // console.log(this.$store.state.comment_id);
      if (this.$store.state.comment_id != null) {
        this.Postcom.parent_id = this.$store.state.comment_id;
      }

      const res = await Postcomments(
        JSON.parse(localStorage.getItem("id")),
        this.Postcom
      );
      // 成功
      // const res = await http.post(
      //   "/comment_post/" + localStorage.getItem("id"),
      //   this.Postcom
      // );
      console.log("准备传值", this.Postcom);
      console.log(res);
      this.$store.dispatch("setComment_idNull1");
      this.$toast.success("评论成功");
      this.commentText = "";
      // 渲染
      this.getComment();
    },

    async getComment() {
      let res = await getComment(this.$route.params.id);
      res = res.data;

      this.count = res.length;
      // console.log(res.length);

      // 构建数据结构
      function fn(temp) {
        let list = [];
        for (let i = 0; i < res.length; i++) {
          if (res[i].parent_id == temp) {
            list.push(res[i]);
            res[i].childrenList = fn(res[i].comment_id);
          }
        }
        return list;
      }
      // const list2 = fn(null);
      // console.log(list2);
      this.commentList = fn(null);
    },

    clickCom(comment_id) {
      this.$refs.commInput.focus();
      // console.log("父组件", comment_id);
      this.Postcom.parent_id = comment_id;
      console.log(this.Postcom);
      // this.Postcomment();
    },
  },
};
</script>

<style lang="less" scoped>
.comment-box {
  padding: 0px 2.778vw;
}
.info {
  margin: 1.389vw 0px;
  display: flex;
  img {
    width: 6.944vw;
    height: 6.944vw;
    border-radius: 6.944vw;
    margin-right: 2.778vw;
  }
  input[type="text"] {
    border: 0;
    background: #f4f4f4;
    border-radius: 6.944vw;
    flex: 1;
    margin-right: 2.778vw;
  }
  input[type="button"] {
    width: 13.889vw;
    height: 8.333vw;
    border: 0;
    background-color: #ff9db5;
    color: #fff;
    font-size: 3.889vw;
  }
}
.user-comment {
  padding: 1.389vw 0vw;
  border-bottom: 0.278vw solid #f4f4f4;
}
.user-comment-top {
  margin-right: 2.778vw;

  display: flex;
  flex-wrap: nowrap;
  img {
    width: 6.944vw;
    height: 6.944vw;
    border-radius: 6.944vw;
  }
  span {
    display: flex;
    align-items: center;
    padding-left: 2.778vw;
  }
}
.user-comment-bottom {
  margin-left: 11.111vw;
}
.comment-items {
  padding-left: 11.111vw;
}
.com_user {
  color: #6ddd99;
}
</style>